let speechRec;
let square;

function setup() { 
  createCanvas(400, 400);
  var foo = new p5.Speech(); // speech synthesis object
  foo.speak('hi there'); // say something 
  speechRec = new p5.SpeechRec(gotSpeech);
  let continuous = true;
  let interimResults = true;
  speechRec.start(continuous, interimResults);
  
  function gotSpeech(speech) {
    
    foo.speak(speech.text);
    if (speech.text.includes("l")) square.moveLeft(speech.text.indexOf("l"));
    if (speech.text.includes("r")) square.moveRight(speech.text.indexOf("r"));    
    if (speech.text.includes("u")) square.moveUp(speech.text.indexOf("u"));
    if (speech.text.includes("d")) square.moveDown(speech.text.indexOf("d"));
    print(speech.text);
	}
  
  square = new Square();
  
} 

function draw() { 
  background(220);
  square.draw();
  
}


class Square {
  constructor() {
    this.x = width/2;
    this.y = height/2;
  }
  
  draw() {
    fill(255, 255, 0);
    noStroke();
    rect(this.x, this.y, 40, 40);
  }

	moveLeft(n) {
    this.x -= n;
  }	
	
	moveRight(n) {
    this.x += n;
  }
	moveUp(n) {
    this.y -= n;
  }	
	
	moveDown(n) {
    this.y += n;
  }
}

